<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .set_bg_con{
            width:440px;
            height:40px;
            border:1px solid #ddd;
            margin:40px auto 0;
            background-color:#fff
        }
        .set_text{
            line-height:40px;
            float:left;
            margin:0 20px 0 10px;
            color:#666;
        }
        .style01,.style02,.style03,.style04,.style05,.style06{
            width:30px;
            height:26px;
            float:left;
            margin:8px 5px;
            background: gold;
            cursor:pointer;
        }
        .style01{
            background:#0181cc;
        }
        .style02{
            background:#00b9f1;
        }
        .style03{
            background:#ef8201;
        }
        .style04{
            background:#8fc320;
        }
        .style05{
            background:#e84191;
        }
        .style06{
            background:#ee87b4;
        }
    </style>
    <script type="text/javascript">
    // 点击色块改变网页的背景色，请写出对应的功能代码
        window.onload = function(){
        //    var oBody = document.getElementById('body');
        //    var oStyle1 = document.getElementById('style');
        //    var finalStyle = document.defaultView.getComputedStyle(oStyle1,null);
        //    alert(oBody);
        //    alert(oStyle1);
        //    alert(finalStyle[0]);
        //    alert(finalStyle[1]);
        //    oStyle1.onclick = function(){
        //        oBody.style.backgroundColor = finalStyle.backgroundColor;
        //    }
            var oBody = document.getElementsByTagName('body')[0];
            var oDiv1 = document.getElementsByTagName("div");
            // alert(oBody)
            // alert(oDiv1)
            for(var i=2; i<8; i++){
                var oStyle = oDiv1[i]
                oStyle.onclick = function(){
                    var finalStyle = document.defaultView.getComputedStyle(this,null);
                    oBody.style.backgroundColor = finalStyle.backgroundColor;
                }
            }            
        }
    </script>
</head>
<body>
    <div class="set_bg_con">
        <div class="set_text">请选择网页的背景色：</div>
        <div class="style01" ></div>
        <div class="style02" ></div>
        <div class="style03" ></div>
        <div class="style04" ></div>
        <div class="style05" ></div>
        <div class="style06" ></div>
    </div>
</body>
</html>